/**
 * @Author: easten
 * @Created: 2024-07-26 17:04:17
 * @Description: 温湿度卡片组件
 *
 */
import React, { useEffect, useMemo, useState } from "react";
import { DeviceCardProps } from ".";
import { Button, Card, Space, Tag, Tooltip } from "tdesign-react";
import { WifiIcon } from "tdesign-icons-react";
import image from "assets/iot-sj.png";
import classNames from "classnames";
import { IotDeviceData } from "_common/DataType";
import { iotDataService } from "_common/service";
import dayjs from "dayjs";
type SjCardProps = DeviceCardProps & {};
const SjCard: React.FC<SjCardProps> = (props: SjCardProps) => {
  const { point, device, onSelect } = props;
  const [iotData, setIotData] = useState<IotDeviceData>(); // 物联网数据
  const [] = useState<number>(2); // 值状态 0 正常 1 警告 2 报警

  useEffect(() => {
    let sub = iotDataService.data$.subscribe((data) => {
      let current = data.find((item) => item.deviceCode === device?.deviceCode);
      if (current) setIotData(current);
    });
    return () => {
      sub.unsubscribe();
    };
  }, []);
  // 判断实时数据是否存在，同时判断时间是距离现在五分钟
  const checkReal = useMemo(() => {
    return iotData && dayjs().diff(iotData.time, "minute") < 5;
  }, [iotData]);

  const stateNode = useMemo(() => {
    if (!iotData) return <span className="text-4xl text-gray-400">--</span>;
    if (iotData.value1 == 0)
      return <span className="text-4xl text-gray-400">离线</span>;
    if (iotData.value1 == 1)
      return <span className="text-4xl text-green-400">正常</span>;
    if (iotData.value1 == 2)
      return <span className="text-4xl text-red-400">报警</span>;
  }, [iotData]);

  return (
    <Card
      headerBordered
      hoverShadow
      title={
        <div className="flex flex-row gap-1 items-center">
          <span>{point?.name}</span>
        </div>
      }
      size="small"
      style={{ padding: 0 }}
      actions={
        <Space size={4} className=" items-center">
          <Tag
            content={"无线水浸"}
            theme="primary"
            variant="light-outline"
            size="small"
          />
          <Tooltip content={checkReal ? "设备在线" : "设备离线"}>
            <Button
              size="small"
              icon={
                <WifiIcon size={20} color={checkReal ? "#11D2E0" : "#CECECE"} />
              }
              variant="text"
              color="#11D2E0"
            ></Button>
          </Tooltip>
        </Space>
      }
    >
      <div className="w-full">
        <div className="w-full h-44 flex flex-row">
          <div className=" h-full w-1/3 flex flex-col justify-center">
            <div className="h-1/2 flex flex-col justify-center items-center">
              <span className="text-2xl mb-2">设备状态</span>
              {stateNode}
            </div>
          </div>
          <div className=" h-full w-1/3 flex flex-col justify-center items-center">
            <img src={image} alt="温湿度设备" className="w-full h-2/3" />
            <Tag variant="light-outline" theme="success">
              {device?.deviceCode}
            </Tag>
          </div>
          <div className=" h-full w-1/3 flex flex-col justify-center">
            <div className="h-1/2 flex flex-col justify-center items-center">
              <span className="text-2xl mb-2">电池电压</span>
              <span className={classNames("text-4xl text-green-400")}>
                {iotData?.value2?.toFixed(1) ?? "--"}V
              </span>
            </div>
          </div>
        </div>
        <div className="flex flex-row justify-between">
          <span>
            监测时间：
            {iotData?.time
              ? dayjs(iotData.time).format("YYYY-MM-DD HH:mm:ss")
              : "--"}
          </span>
          <Button
            size="small"
            theme="success"
            variant="outline"
            onClick={() => onSelect?.(point)}
          >
            查看详情
          </Button>
        </div>
      </div>
    </Card>
  );
};

export default SjCard;
